<!DOCTYPE html>
<html>
<head>
    <title>直接输入监听演示</title>
    <style>
        .container { margin: 20px; }
        .input-area { margin: 10px 0; }
        .log { 
            border: 1px solid #ccc; 
            height: 200px; 
            overflow: auto; 
            padding: 10px;
            background: #f9f9f9;
        }
        .direct { color: green; font-weight: bold; }
        .ime { color: blue; }
    </style>
</head>
<body>
    <div class="container">
        <h2>直接输入监听演示</h2>
        
        <div class="input-area">
            <label>测试输入框：</label><br>
            <input type="text" id="testInput" placeholder="尝试直接输入和中文输入法输入..." style="width: 300px; padding: 5px;">
        </div>
        
        <div>
            <h3>输入事件日志：</h3>
            <div id="eventLog" class="log"></div>
        </div>
    </div>

    <script>
        class DirectInputMonitor {
            constructor(inputId) {
                this.input = document.getElementById(inputId);
                this.log = document.getElementById('eventLog');
                this.isComposing = false;
                this.lastValue = '';
                this.setupMonitoring();
            }
            
            setupMonitoring() {
                // 输入法事件
                this.input.addEventListener('compositionstart', () => {
                    this.isComposing = true;
                    this.addLog('🎯 开始输入法组合', 'ime');
                });
                
                this.input.addEventListener('compositionupdate', (e) => {
                    this.addLog(`输入法组合中: "${e.data}"`, 'ime');
                });
                
                this.input.addEventListener('compositionend', (e) => {
                    this.isComposing = false;
                    this.addLog(`✅ 输入法完成: "${e.data}"`, 'ime');
                });
                
                // 输入事件 - 重点监听直接输入
                this.input.addEventListener('input', (e) => {
                    const currentValue = e.target.value;
                    
                    if (!this.isComposing) {
                        // 直接输入
                        this.handleDirectInput(e, currentValue);
                    } else {
                        // 输入法输入中
                        this.addLog(`输入法中... 当前值: "${currentValue}"`, 'ime');
                    }
                    
                    this.lastValue = currentValue;
                });
                
                this.lastValue = this.input.value;
            }
            
            handleDirectInput(event, currentValue) {
                const inputType = event.inputType;
                const newChar = event.data;
                
                let message = '';
                
                switch(inputType) {
                    case 'insertText':
                        message = `🔤 直接输入字符: "${newChar}" → 当前值: "${currentValue}"`;
                        break;
                    case 'deleteContentBackward':
                        message = `⌫ 退格删除 → 当前值: "${currentValue}"`;
                        break;
                    case 'deleteContentForward':
                        message = `🗑️ 删除键 → 当前值: "${currentValue}"`;
                        break;
                    default:
                        message = `⚡ 直接操作 [${inputType}] → 当前值: "${currentValue}"`;
                }
                
                this.addLog(message, 'direct');
            }
            
            addLog(message, type = 'other') {
                const time = new Date().toLocaleTimeString();
                const logEntry = document.createElement('div');
                logEntry.className = type;
                logEntry.innerHTML = `[${time}] ${message}`;
                this.log.appendChild(logEntry);
                this.log.scrollTop = this.log.scrollHeight;
            }
        }
        
        // 初始化监听
        new DirectInputMonitor('testInput');
    </script>
</body>
</html>